<template>
    <div>
        <div class="pub-table-action-btn">
            <a-button v-if="!disabled" type="primary" icon="plus" @click="add">增行</a-button>
        </div>
        <a-table
            :pagination="false"
            :columns="columns"
            :data-source="pageTableData">
            <span slot="index" slot-scope="text, record, index">{{ index + 1 }}</span>
            <template
                v-for="col in ['amount','designation','specificationModel']"
                :slot="col"
                slot-scope="text, record, index">
                <template v-if="index === editingIndex">
                    <b-input-number :min="1" :is-int="true" v-if="col === 'amount'" v-model="record[col]"></b-input-number>
                    <b-input v-else v-model="record[col]"></b-input>
                </template>
                <template v-else>
                    {{ text }}
                </template>
            </template>
            <template slot="operation" slot-scope="text, record, index">
                <div class="pub-table-list-action" v-if="!disabled">
                    <template v-if="index === editingIndex">
                        <span @click="save(index)">保存</span>
                        <span @click="cancel(index)">取消</span>
                    </template>
                    <template v-if="editingIndex === null">
                        <span @click="edit(index)">编辑</span>
                        <span @click="del(record)">删除
                        </span>
                    </template>
                </div>
            </template>
        </a-table>
        <!--        <pagination-->
        <!--            :total="tableData.length"-->
        <!--            v-model="pageNo"-->
        <!--            :pageSize.sync="pageSize"-->
        <!--            @change="handlePageChange"-->
        <!--            @showSizeChange="showSizeChange"-->
        <!--        ></pagination>-->
    </div>
</template>

<script>
export default {
    name: 'part',
    props: {
        list: {
            type: Array,
            default: () => {
                return []
            }
        },
        disabled: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            pageNo: 1,
            pageSize: 10,
            cacheRow: null,
            columns: [
                { title: '序号', width: 70, scopedSlots: { customRender: 'index' } },
                { title: '名称', dataIndex: 'designation', scopedSlots: { customRender: 'designation' } },
                { title: '规格型号', dataIndex: 'specificationModel', scopedSlots: { customRender: 'specificationModel' } },
                { title: '数量', dataIndex: 'amount', width: 100, scopedSlots: { customRender: 'amount' } },
                { title: '操作', dataIndex: 'operation', width: 200, scopedSlots: { customRender: 'operation' } }
            ],
            editingIndex: null,
            tableData: [],
            cacheTable: []
        }
    },
    computed: {
        pageTableData() {
            return this.tableData.slice((this.pageNo - 1) * this.pageSize, this.pageNo * this.pageSize)
        }
    },
    watch: {
        list() {
            this.tableData = this.$clone(this.list)
        }
    },
    mounted() {
        this.tableData = this.$clone(this.list)
    },
    methods: {
        handlePageChange(pageNo, pageSize) {
            this.pageNo = pageNo
        },
        showSizeChange(pageNo, pageSize) {
            this.pageNo = 1
            this.pageSize = pageSize
        },
        del(item) {
            this.$confirm({
                title: '确认删除该数据？',
                onOk: () => {
                    let resIndex = this.tableData.findIndex(v => v.id === item.id)
                    if (resIndex !== -1) {
                        this.tableData.splice(resIndex, 1)
                    }
                    this.$emit('update:list', this.tableData)
                    if (this.tableData.length && this.tableData.length <= (this.pageNo * this.pageSize - this.pageSize)) {
                        this.pageNo = this.pageNo - 1
                    }
                    this.$noticeSuccess('删除成功')
                }
            })
        },
        add() {
            if (this.editingIndex !== null) return this.$noticeWarning('请结束当前行再添加')
            this.tableData.unshift({
                id: Date.now(),
                amount: '',
                designation: '',
                specificationModel: ''
            })
            this.editingIndex = 0
        },
        edit(index) {
            this.editingIndex = index
            this.cacheTable = this.$clone(this.tableData)
        },
        save(index) {
            if (!this.tableData[index].amount) return this.$noticeWarning('请输入数量')
            if (!this.tableData[index].designation) return this.$noticeWarning('请输入名称')
            if (!this.tableData[index].specificationModel) return this.$noticeWarning('请输入规格型号')

            this.$emit('update:list', this.tableData)
            this.editingIndex = null
        },
        cancel(index) {
            this.tableData = this.$clone(this.cacheTable)
            this.$emit('update:list', this.cacheTable)
            this.editingIndex = null
        }
    }
}
</script>

<style scoped>

</style>
